<template>
  <div class="transit-record-list">
    <el-table
      :data="records"
      :loading="loading"
      style="width: 100%"
    >
      <el-table-column prop="transitType" label="类型" width="100">
        <template #default="{ row }">
          <el-tag :type="row.transitType === 'BUS' ? 'success' : 'primary'">
            {{ row.transitType === 'BUS' ? '公交' : '地铁' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="lineNumber" label="线路" width="120" />

      <el-table-column prop="startStation" label="起始站" width="150" />

      <el-table-column prop="endStation" label="终点站" width="150" />

      <el-table-column prop="startTime" label="开始时间" width="180">
        <template #default="{ row }">
          {{ formatDateTime(row.startTime) }}
        </template>
      </el-table-column>

      <el-table-column prop="endTime" label="结束时间" width="180">
        <template #default="{ row }">
          {{ row.endTime ? formatDateTime(row.endTime) : '-' }}
        </template>
      </el-table-column>

      <el-table-column prop="duration" label="时长" width="120">
        <template #default="{ row }">
          {{ row.duration ? formatDuration(row.duration) : '-' }}
        </template>
      </el-table-column>

      <el-table-column prop="amount" label="金额" width="120">
        <template #default="{ row }">
          <span v-if="row.amount">¥{{ row.amount.toFixed(2) }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column prop="status" label="状态" width="120">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" width="150">
        <template #default="{ row }">
          <el-button
            v-if="row.status === 'PENDING_PAYMENT'"
            type="primary"
            link
            @click="$emit('show-payment', row)"
          >
            支付
          </el-button>
          <el-button
            type="primary"
            link
            @click="$emit('view-detail', row)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { formatDateTime, formatDuration } from '@/utils/format'

export default {
  name: 'TransitRecordList',
  props: {
    records: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  emits: ['show-payment', 'view-detail'],
  setup() {
    // 获取状态类型
    const getStatusType = (status) => {
      const statusMap = {
        IN_PROGRESS: 'warning',
        COMPLETED: 'success',
        PENDING_PAYMENT: 'danger',
        PAID: 'success',
        OVERDUE: 'danger'
      }
      return statusMap[status] || 'info'
    }

    // 获取状态文本
    const getStatusText = (status) => {
      const statusMap = {
        IN_PROGRESS: '进行中',
        COMPLETED: '已完成',
        PENDING_PAYMENT: '待支付',
        PAID: '已支付',
        OVERDUE: '已逾期'
      }
      return statusMap[status] || status
    }

    return {
      formatDateTime,
      formatDuration,
      getStatusType,
      getStatusText
    }
  }
}
</script>

<style scoped>
.transit-record-list {
  margin-top: 20px;
}
</style> 